<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>订单</title>
    <link rel="stylesheet" href="__CSS__/mui-3.6.1.min.css">
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/order.css">
    <style>
        button{
            border: 0 none !important;
        }
    </style>
</head>
<body>
<div class="topbar-between horizontal-view gradient-color">
    <div class="topbar-back"></div>
    <div class="topbar-title">订单</div>
    <div class="topbar-right"></div>
</div>
<div id="pullrefresh" class="mui-scroll-wrapper" style="margin-top: 45px;">
    <div class="mui-scroll">
        <ul id="ppp" class="mui-table-view no-line">
            <volist name="info" id="vo">
            <li class="mui-table-view-cell vertical-view order-li-wrap">
                <div class="horizontal-view status-wrap">
                    <div class="status-font">{$vo.messageStatus}</div>
                    <div class="order-time">{$vo.createTime}</div>
                    <if condition="$vo.orderStatus eq '-1'">
                        <button type="button"  class="order-delete" onclick="deleteOrder({$vo.orderId})"></button>
                    </if>

                </div>
                <a href="/Wx/Orders/orderDetail/id/{$vo.orderId}">
                <div class="horizontal-view order-content">
                    <div class="shop-logo-wrap">
                        <img class="shop-logo" src="/{$vo.shopImg}"/>
                    </div>
                    <div class="vertical-view order-detail-wrap">
                        <div class="shop-name gray-line-after">{$vo.shopName}</div>
                        <ul>
                            <volist name="vo.goods" id="goods">
                            <li class="horizontal-view order-detail-li">
                                <div class="goods-name">{$goods.goodsName}</div>
                                <div class="goods-num">× {$goods.goodsNums}</div>
                            </li>
                            </volist>
                        </ul>
                        <div class="order-total">
                            共<span class="total-font">{$vo.count}</span>份，实付<span class="pay-font">￥{$vo.needPay}</span>
                        </div>
                    </div>
                </div>
                </a>
            </li>
            </volist>

        </ul>
    </div>
</div>
<input type="hidden" name="page" id="page" value="0">
<script src="__JS__/mui-3.6.1.min.js"></script>
<script>
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                callback: function(){
                    var self = this;
                    setTimeout(function(){
                        var ul = self.element.querySelector('#ppp');
                        var childs = ul.childNodes;
                        var count = childs.length;
//                        console.log(ul);
//                        console.log(childs.length);
                        //清除子节点
                        for(var i = count - 1; i >= 0; i--) {
                            ul.removeChild(childs[i]);
                        }
                        pullupRefresh(self, ul,'down');
                        self.endPulldownToRefresh();
                    },1000);
                }
            },
            up: {
                contentrefresh: '正在加载...',
                callback: function () {
                    var self = this;
                    setTimeout(function () {
                        var ul = self.element.querySelector('#ppp');
                        pullupRefresh(self, ul,'up');
                    },1000);
                }
            }
        }
    });
    //阻尼系数
    var deceleration = mui.os.ios ? 0.003 : 0.0009;
    mui('.mui-scroll-wrapper').scroll({
        bounce: false,
        indicators: true, //是否显示滚动条
        deceleration: deceleration
//            0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });

    /**
     * 下拉刷新具体业务实现
     */
    function pulldownRefresh() {
        setTimeout(function () {
            var table = document.body.querySelector('.mui-table-view');
            for (var i = 0; i < 1; i++) {
                var li = document.createElement('li');
                li.className = 'mui-table-view-cell vertical-view order-li-wrap';
                li.innerHTML = '<div class="horizontal-view status-wrap">\
                    <div class="status-font">等待发货</div>\
                    <div class="order-time">2017-06-01 16:00:00</div>\
                <div class="order-delete" onclick="deleteOrder(1)"></div>\
                    </div>\
                    <div class="horizontal-view order-content" onclick="enterDetail(1)">\
                    <div class="shop-logo-wrap">\
                    <img class="shop-logo" src="../image/sp_5.png"/>\
                    </div>\
                    <div class="vertical-view order-detail-wrap">\
                    <div class="shop-name gray-line-after">店铺名称</div>\
                    <ul>\
                    <li class="horizontal-view order-detail-li">\
                    <div class="goods-name">商品A</div>\
                    <div class="goods-num">× 1</div>\
                </li>\
                <li class="horizontal-view order-detail-li">\
                    <div class="goods-name">商品B</div>\
                    <div class="goods-num">× 10</div>\
                </li>\
                <li class="horizontal-view order-detail-li">\
                    <div class="goods-name">商品C</div>\
                    <div class="goods-num">× 100</div>\
                </li>\
                </ul>\
                <div class="order-total">\
                    共<span class="total-font">3</span>份，实付<span class="pay-font">￥88.00</span>\
                </div>\
                </div>\
                </div></a>';
                //下拉刷新，新纪录插到最前面；
                table.insertBefore(li, table.firstChild);
            }
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
        }, 1500);
    }
    var count = 0;
    /**
     * 上拉加载具体业务实现
     */
    function pullupRefresh(self, ul,type) {
            //下拉更新数据，上拉加载数据
            var objPage = document.getElementById('page');
            var  page = objPage.value;
            page++;
            page = type=='down'?0:page;

            $.get('{:U("index/orders")}',{'ajax':1,'page':page},function(res){

                if(res.error==0){
                    $.each(res.message,function(k,v){
                        var li = document.createElement('li');
                        li.className = 'mui-table-view-cell vertical-view order-li-wrap';
                        var goodsTemp = '';
                        var buttontmp = '';

                        //已取消订单删除按钮
                        if(v.orderStatus==-1){
                            buttontmp='<button type="button"  class="order-delete" onclick="deleteOrder('+v.orderId+')"></button>';
                        }

                        //商品列表
                        if(v.goods!=null){
                            //console.log(v.goods.length);
                            $.each(v.goods,function (k2,v2) {
                                goodsTemp+="<li class='horizontal-view order-detail-li'>";
                                goodsTemp+="<div class='goods-name'>"+v2.goodsName+"</div>";
                                goodsTemp+="<div class='goods-num'>× "+v2.goodsNums+"</div>";
                                goodsTemp+="</li>";
                            });
                        }

                        li.innerHTML = '<div class="horizontal-view status-wrap">\
                    <div class="status-font">'+v.messageStatus+'</div>\
                    <div class="order-time">'+v.createTime+'</div>'+buttontmp+'</div>\
                    <a href="/Wx/Orders/orderDetail/id/'+v.orderId+'">\
                    <div class="horizontal-view order-content">\
                    <div class="shop-logo-wrap">\
                    <img class="shop-logo" src="/'+v.shopImg+'"/>\
                    </div>\
                    <div class="vertical-view order-detail-wrap">\
                    <div class="shop-name gray-line-after">'+v.shopName+'</div>\
                    <ul>'+goodsTemp+'</ul>\
                <div class="order-total">\
                    共<span class="total-font">'+v.count+'</span>份，实付<span class="pay-font">￥'+v.needPay+'</span>\
                </div>\
                </div>\
                </div>';
                        objPage.value=page;
                        ul.appendChild(li);
                        self.endPullupToRefresh();
                    });
                }else{
                    self.endPullupToRefresh(true);
                }
        },'json');

    }

    /**
     * 订单详情页面
     * @param order_id
     */
    function enterDetail(order_id) {
       // console.log(order_id);
        //mui.toast('enter!');
      location.href='/Wx/Orders/orderDetail/id/'+order_id;
    }
    /**
     * 删除订单
     * @param order_id
     */
    var index =true;
    function deleteOrder(order_id) {
        mui.confirm(
            '是否删除此订单？',
            '',
            ['取消', '删除'],
            function (e) {
                if(index){
                    if(e.index===1){
                        index=false;
                        //console.log('index===1');
                        $.ajax({
                            type: "POST",
                            url: "{:U('Orders/delOrder')}",
                            data: {oid:order_id},
                            dataType: "json",
                            success: function(data){
                                index=true;
                                //console.log(data);
                                if(data.status==-2){
                                    mui.toast('操作失败');
                                    setTimeout(function(){
                                        location.href="{:U('Login/Login')}";
                                    },1000);
                                    return;
                                }else if(data.status==-1){
                                    mui.toast('操作失败');
                                    return;
                                }else if(data.status==0){
                                    mui.toast('订单删除成功');
                                    setTimeout(function(){
                                        location.reload([true]);
                                    },1000)
                                    return;
                                }else if(data.status==-3){
                                    mui.toast('请不要重复提交');
                                    return;
                                }
                            }
                        });
                    }
                }

            })
    }

//    mui("body").on('tap', 'div', function (event) {
//        this.click();
//    });
</script>
</body>
</html>